// src/components/Header/index.jsx - 更新的Header组件
import { Link, useLocation, useNavigate } from 'react-router-dom'
import { Bot, Home, FileText, User, LogOut, Settings } from 'lucide-react'
import { useAuth } from '../../contexts/AuthContext'
import './style.css'

const Header = () => {
  const location = useLocation()
  const navigate = useNavigate()
  const { user, isAuthenticated, logout } = useAuth()
  
  const isActive = (path) => location.pathname === path

  // 在认证页面和面试房间页面隐藏header
  const hideHeaderPaths = ['/login', '/register']
  const isInterviewRoom = location.pathname.includes('/interview/')
  
  if (hideHeaderPaths.includes(location.pathname) || isInterviewRoom) {
    return null
  }

  const handleLogout = () => {
    if (window.confirm('确定要退出登录吗？')) {
      logout()
      navigate('/login')
    }
  }

  return (
    <header className="app-header">
      <div className="header-container">
        <Link to={isAuthenticated() ? "/home" : "/login"} className="logo">
          <Bot size={32} />
          <span className="logo-text">AI面试官</span>
        </Link>

        {isAuthenticated() && (
          <nav className="nav-menu">
            <Link 
              to="/home" 
              className={`nav-link ${isActive('/home') ? 'active' : ''}`}
            >
              <Home size={18} />
              <span>首页</span>
            </Link>
            <Link 
              to="/prep" 
              className={`nav-link ${isActive('/prep') ? 'active' : ''}`}
            >
              <FileText size={18} />
              <span>开始面试</span>
            </Link>
          </nav>
        )}

        <div className="header-actions">
          {isAuthenticated() ? (
            // 已登录状态
            <>
              <div className="user-info">
                <span className="user-avatar">{user?.avatar || '👤'}</span>
                <div className="user-details">
                  <span className="user-name">{user?.username}</span>
                  <span className="user-email">{user?.email}</span>
                </div>
              </div>
              
              <div className="user-menu">
                <button className="icon-btn" title="设置">
                  <Settings size={20} />
                </button>
                <button className="icon-btn logout-btn" onClick={handleLogout} title="退出登录">
                  <LogOut size={20} />
                </button>
              </div>
            </>
          ) : (
            // 未登录状态
            <div className="auth-links">
              <Link to="/login" className="auth-link">
                登录
              </Link>
              <Link to="/register" className="auth-link register">
                注册
              </Link>
            </div>
          )}
        </div>
      </div>
    </header>
  )
}

export default Header